<template>
	<view>
		<tuiTabbar :current="current" backdropFilter hump backgroundColor="#FFFFFF" :tabBar="tabBarList" color="#666666"
			:isFixed="isFixed" selectedColor="#138E57"  @click="tabbarSwitch"></tuiTabbar>
		<view class="zhan-fixed" v-if="isFixed"></view>
	</view>
	
</template>

<script>
	import tuiTabbar from "./tui-tabbar.vue"
	export default {
		components: {
			tuiTabbar
		},
		data() {
			return {
				current: 0,
				tabBarList: [{
						pagePath: '/pages/index/index',
						text: '首页',
						iconPath: '/static/images/tabbar/index.png',
						selectedIconPath: '/static/images/tabbar/index_active.png'
					},
					{
						pagePath: '/pages/task/index',
						text: '任务中心',
						iconPath: '/static/images/tabbar/task.png',
						selectedIconPath: '/static/images/tabbar/task_active.png',
					},
					{
						pagePath: '/pages/police/index',
						text: '报警中心',
						iconPath: '/static/images/tabbar/police.png',
						selectedIconPath: '/static/images/tabbar/police_active.png',
					}
				]
			};
		},
		props: {
			tabIndex: {
				type: Number,
				default: 0
			},
			isFixed: {
				type: Boolean,
				default: !0
			}
		},
		watch: {
			tabIndex: {
				handler(val) {
					this.current = val;
				},
				immediate: true
			}
		},
		created() {

		},
		methods: {
			tabbarSwitch(e) {
				uni.switchTab({
					url:e.pagePath
				})
			}
		}
	};
</script>

<style scoped lang="scss">
.zhan-fixed{
	height:100rpx;
	height: calc(100rpx + constant(safe-area-inset-bottom));
	height: calc(100rpx + env(safe-area-inset-bottom));
}
</style>